<!-- 个人信息设置 -->
<template>
    <view class="container">
        <view class="ui-all">
            <view class="ui-list">
                <text>头像</text>
				<button open-type="chooseAvatar" @chooseavatar="chooseavatar">
					<u-avatar :src="avater"/>
				</button>
            </view>
            <view class="ui-list">
                <text>昵称</text>
                <input class="input" v-if="nickName" type="text" :value="nickName" />
				<button v-else open-type="getUserInfo" @getuserinfo="getuserinfo">授权昵称</button>
            </view>
            <view class="ui-list">
                <text>手机号</text>
                <input v-if="mobile" type="tel" :value="mobile" @input="bindmobile" placeholder-class="place" />
                <button v-if="!mobile" open-type="getPhoneNumber" @getphonenumber="getphonenumber">授权手机号</button>
            </view>
            <button class="save" @tap="savaInfo">保 存 修 改</button>
        </view>

    </view>
</template>

<script>
    export default {

        data() {
            return {
                avater: '',
				nickName: '',
                userId: '1111',
                value: '请填写',
                
                url: '',
                mobile: '',
                headimg: ''

            }

        },
        methods: {
            chooseavatar(e) {
				console.log(e)
				if (e) {
					this.avater = e.detail.avatarUrl
					uni.showToast({
					    title: '已授权',
					    icon: 'none',
					    duration: 2000
					})
				} else{
					uni.chooseImage({
					    count: 1,
					    sizeType: ['original', 'compressed'],
					    sourceType: ['album', 'camera'],
					    success(res) {
					        // tempFilePath可以作为img标签的src属性显示图片
					        that.imgUpload(res.tempFilePaths);
					        const tempFilePaths = res.tempFilePaths;
					    }
					});
				}
            },
            getuserinfo(e) {
                if (e.detail.userInfo) {
					// 用户同意授权，处理用户信息
                    console.log('用户信息:', e.detail.userInfo);
					this.nickName = e.detail.userInfo.nickName;
                } else {
                    // 用户拒绝授权，提示用户
                    wx.showModal({
                        title: '提示',
                        content: '您需要授权才能使用该功能',
						showCancel: false
                    });
				}
            },
            getphonenumber(e) {
                if (e.detail.iv) {
                    console.log(e.detail.iv) //传后台解密换取手机号
                    uni.showToast({
                        title: '已授权',
                        icon: 'none',
                        duration: 2000
                    })
                }
            },
            savaInfo() {
                let that = this;
                let nickname = that.nickName;
                let headimg = that.headimg;
                let mobile = that.mobile;

                let updata = {};
                if (!nickname) {
                    uni.showToast({
                        title: '请填写昵称',
                        icon: 'none',
                        duration: 2000
                    });
                    return;
                }
                updata.nickname = nickname;
                if (!headimg) {
                    headimg = that.avater;
                }
                updata.headimg = headimg;
                
                if (that.isPoneAvailable(mobile)) {
                    updata.mobile = mobile;
                } else {
                    uni.showToast({
                        title: '手机号码有误，请重填',
                        icon: 'none',
                        duration: 2000
                    });
                    return;
                }

                updata.birthday = birthday;
                
                that.updata(updata);
            },
            isPoneAvailable(poneInput) {
                var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
                if (!myreg.test(poneInput)) {
                    return false;
                } else {
                    return true;
                }
            },
            async updata(datas) {
                //传后台

            },
            imgUpload(file) {
                let that = this;
                uni.uploadFile({
                    header: {
                        Authorization: uni.getStorageSync('token')
                    },
                    url: '/api/upload/image', //需传后台图片上传接口
                    filePath: file[0],
                    name: 'file',
                    formData: {
                        type: 'user_headimg'
                    },
                    success: function(res) {
                        var data = JSON.parse(res.data);
                        data = data.data;
                        that.avater = that.url + data.img;

                        that.headimg = that.url + data.img;


                    },
                    fail: function(error) {
                        console.log(error);
                    }
                });
            },

        },
        onLoad() {}

    }
</script>

<style lang="scss" scoped>
    .container {
        display: block;

        .ui-all {
            padding: 20rpx 40rpx;
			
			.ui-list {
			    width: 100%;
			    padding: 20rpx 0;
			    border-bottom: solid 1px #f2f2f2;
			    position: relative;
				display: flex;
				justify-content: space-between;
				align-items: center;
			
			    text {
			        color: #4a4a4a;
			        font-size: 28rpx;
			        display: inline-block;
			        vertical-align: middle;
			        min-width: 150rpx;
			    }
			
			    input {
					flex: 1;
			        color: #030303;
			        font-size: 30rpx;
					text-align: right;
			    }
			
			    button {
			        color: #030303;
			        font-size: 30rpx;
			        display: inline-block;
			        vertical-align: middle;
			        background: none;
			        margin: 0;
			        padding: 0;
			
			        &::after {
			            display: none;
			        }
			    }
			}

            .save {
                background: #030303;
                border: none;
                color: #ffffff;
                margin-top: 40rpx;
                font-size: 28rpx;
            }
        }
    }
</style>